<!doctype html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>作品分类</title>
  <link rel="Shortcut Icon" type="image/x-icon" href="css/favicon.ico">
  <link rel="apple-touch-icon-precomposed" href="css/clip_icon.png">
  <link rel="stylesheet" type="text/css" href="css/layout.css">
  <link rel="stylesheet" type="text/css" href="css/general.css">
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <link href="css/css" rel="stylesheet">
  <link rel="stylesheet" href="./elementui/index.css">
  <script src="./js/vue.js"></script>
  <script src="./js/elment.js"></script>
</head>

<body>
  <div id="app">
    <div id="container">
      <header id="gHeader">
        <div class="logo">
          <a href="index.html"><img src="images/logo.png" alt="书法历史长河"></a>
        </div>
        <div class="menu">
          <a href="#"><img src="images/menu.png" alt=""></a>
        </div>
      </header>
      <div class="menuBox">
        <div class="menuContent">
          <div class="close">
            <a href="#"><img src="images/close.png" alt=""></a>
          </div>
          <p>选择</p>
          <ul class="menuUl">
            <li><a href="#"><img src="images/imgtext01.png" alt="ABOUTus"><span>关于我们</span></a></li>
            <li><a href="./3.html"><img src="images/imgtext02.png" alt="works"><span>作品合集</span></a></li>
          </ul>
        </div>
      </div>
      <div class="spCover"></div>
      <section id="main">
        <div class="mainBox">
          <div class="inner target">
            <div class="lBox pc">
              <p>历史书法家最多的时代<span>唐朝</span></p>
            </div>
            <div class="rBox">
              <form action="./index.html" method="get" name="form">
                <ul class="jsUl clearfix">
                  <li><a href="#"><span class="txt01">书法体</span><span class="txt02">{{ filter.a_style }}</span></a>
                    <ul class="subUl" id="code1">
                      <li @click="filter.a_style = '所有';getData()">所有</li>
                      <li @click="filter.a_style = item.style_name;getData()" v-for="item in styleList"
                        :id="item.style_num">{{item.style_name}}</li>
                    </ul>
                  </li>
                  <li><a href="#"><span class="txt01">材质</span><span class="txt02">{{ filter.a_material }}</span></a>
                    <ul class="subUl" id="code2">
                      <li @click="filter.a_material = '所有';getData()">所有</li>
                      <li @click="filter.a_material = item.material_name;getData()" v-for="item in mList"
                        :id="item.material_num">{{item.material_name}}</li>
                    </ul>
                  </li>
                  <li><a href="#"><span class="txt01">时代</span><span class="txt02">{{ filter.a_time }}</span></a>
                    <ul class="subUl" id="code3">
                      <li @click="filter.a_time = '所有';getData()">所有</li>
                      <li @click="filter.a_time = item;getData()" v-for="item in timeList">{{item}}</li>
                    </ul>
                  </li>
                  <li><a href="#"><span class="txt01">书法家</span><span class="txt02">{{ filter.a_calliphist }}</span></a>
                    <ul class="subUl" id="code4">
                      <li @click="filter.a_calliphist = '所有';getData()">所有</li>
                      <li @click="filter.a_calliphist = item.name;getData()" v-for="item in sfjList">{{item.name}}</li>
                    </ul>
                  </li>

                  <li><a href="#"><span class="txt01">事件</span><span class="txt02">{{ filter.a_event }}</span></a>
                    <ul class="subUl" id="code5">
                      <li @click="filter.a_event = '所有';getData()">所有</li>
                      <li @click="filter.a_event = item.event_name;getData()" v-for="item in eventList"
                        :id="item.event_num">{{item.event_name}}</li>
                    </ul>
                  </li>
                  <!-- <div class="search">
                    <input type="text" value="" name="keyword" placeholder="" title="SEARCH">
                    <img data-original="../img/common/icon15.png" alt="" class="lazy">
                  </div> -->


              </form>
            </div>
          </div>
          <ul class="txtList target">
            <li class="off"><a href="4.html">书法家</a>|</li>
            <li class="on"><a href="javascript:void(0);">作品内容</a>|</li>
            <li class="off"><a href="5.html">趣味知识</a>|</li>
            <li class="off"><a href="6.html">可视化表</a>|</li>
            <li class="off"><a href="7.html">论坛</a></li> 
          </ul>
          <ul style="column-count: 5;column-gap: 0;" v-if="list.length > 5">
            <li class="comHover01" @click="toDetail(item)" v-for="item in list"
              style="margin-bottom: 20px;margin-right: 10px;">
              <div class="subComHover01" style="width: 100%;height: 100%;">
                <a style="width: 100%;" href="#"><span><span><img :src="JSON.parse(item.a_img)[0]"
                        style="width: 100%;"></span></span>
                  <div class="txt wryh slh" style="width: 100%;text-align: center;">{{item.a_name}}</div>
                </a>
              </div>
            </li>
          </ul>
          <ul v-if="list.length <= 5" style="position: relative;">
            <li class="comHover01" @click="toDetail(item)" v-for="item in list"
              style="width: 20%;margin-bottom: 20px;margin-right: 10px;float: left;">
              <div class="subComHover01" style="width: 100%;height: 100%;">
                <a style="width: 100%;" href="#"><span><span><img :src="JSON.parse(item.a_img)[0]"
                        style="width: 100%;"></span></span>
                  <div class="txt wryh slh" style="width: 100%;text-align: center;">{{item.a_name}}</div>
                </a>
              </div>
            </li>
          </ul>
        </div>
      </section>
      <!-- <footer id="gFooter" class="clearfix">
        <div class="bg">
          <div class="fBox">
            <div class="pageTop">
              <a href="#"><img src="images/page_top.gif" alt="" class="pc"><img src="images/sp_page_top.gif" alt=""
                  class="sp"></a>
            </div>

          </div>
        </div>
      </footer> -->
    </div>
  </div>
  <script src="js/jquery.min.js"></script>
  <script src="js/iscroll.min.js"></script>
  <script src="js/ofi.min.js"></script>
  <script src="js/echo.min.js"></script>
  <script src="js/common.js"></script>
  <script src="js/jquery.lazyload.min.js"></script>
  <script src="js/jquery.matchHeight-min.js"></script>
  <script src="js/placeholder.js"></script>
  <script src="js/artists.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          list: [],
          listFilter: [],
          mList: [],
          styleList: [],
          sfjList: [],
          eventList: [],
          sfjList: [],
          dialogVisible: false,
          currentSFJ: {},
          filter: {
            a_style: '所有',
            a_material: '所有',
            a_time: '所有',
            a_event: '所有',
            a_calliphist: '所有',
          },
          timeList: ['先秦', '汉代', '隋唐', '魏晋南北朝', '五代宋', '元', '明', '清', '民国'],
        }
      },
      created() {
        fetch('/material/get', {
          method: "POST",
          body: JSON.stringify({
            page: 1,
            pageSize: 10000
          }),
          headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
          },
        }).then((response) => {
          return response.json().then((res) => {
            this.mList = res.data
            console.log(this.mList)
          })
        })
        fetch('/style/get', {
          method: "POST",
          body: JSON.stringify({
            page: 1,
            pageSize: 10000
          }),
          headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
          },
        }).then((response) => {
          return response.json().then((res) => {
            this.styleList = res.data
          })
        })
        fetch('/event/get', {
          method: "POST",
          body: JSON.stringify({
            page: 1,
            pageSize: 10000
          }),
          headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
          },
        }).then((response) => {
          return response.json().then((res) => {
            this.eventList = res.data
          })
        })
        fetch('/sfj/get', {
          method: "POST",
          body: JSON.stringify({
            page: 1,
            pageSize: 10000
          }),
          headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
          },
        }).then((response) => {
          return response.json().then((res) => {
            this.sfjList = res.data
          })
        })
      },
      mounted() {
        this.getData()
      },
      methods: {
        getData() {
          let params = {
            page: 1,
            pageSize: 10000
          }
          let values = Object.values(this.filter)
          for (let i = 0; i < values.length; i++) {
            const item = values[i]
            if (item !== '所有') {
              switch (i) {
                case 0:
                  let styleNum = this.styleList.find(v => v.style_name === this.filter.a_style).style_num
                  params.a_style = styleNum
                  break;
                case 1:
                  let materialNum = this.mList.find(v => v.material_name === this.filter.a_material).material_num
                  params.a_material = materialNum
                  break;
                case 2:
                  params.a_time = this.filter.a_time
                  break;
                case 3:
                  let evNum = this.eventList.find(v => v.event_name === this.filter.a_event).event_num
                  params.a_event = evNum
                  break;
                case 4:
                  params.a_calliphist = this.filter.a_calliphist
                  break;
              }
            }
          }
          console.log(params)
          fetch('/property/get', {
            method: "POST",
            body: JSON.stringify(params),
            headers: {
              "Content-Type": "application/json",
              "Accept": "application/json"
            },
          }).then((response) => {
            return response.json().then((res) => {
              this.list = res.data
              console.log(this.list)
              console.log(JSON.parse(this.list[0].a_img))
            }).catch((err) => {
              console.log("error :", err)
            })
          })
        },
        toDetail(data) {
          data.a_material_name = this.mList.find(v => v.material_num === data.a_material) ? this.mList.find(v => v
            .material_num === data.a_material).material_name : ''
          data.a_style_name = this.styleList.find(v => v.style_num === data.a_style) ? this.styleList.find(v => v
            .style_num === data.a_style).style_name : ''
          data.a_material_name = this.eventList.find(v => v.event_num === data.a_event) ? this.eventList.find(v => v
            .event_num === data.a_event).event_name : ''
          localStorage.setItem('currentProperty', JSON.stringify(data))
          window.location.href = "detail.html";
        },
        showSFJDetail(data) {
          console.log(data)
          this.currentSFJ = data;
          this.dialogVisible = true
        },
        handleClose() {
          this.dialogVisible = false
        }
      }
    })
  </script>

  <!--异步加载部分-->
  <script async src="js/js"></script>

  <script type="text/javascript">
    var sort = 'rand';
    var keyword = '';
    var ini = '';
    var code1 = '';
    var code2 = '';
    var code3 = '';
    var code4 = '';
    var code5 = '';

    $(function () {
      if (code1 != '') {
        var txt = $('#code1 li').filter(function () {
          return $(this).attr('id') == code1;
        }).html();
        $('#code1').prev().find('.txt02').html(txt);
      }
      $('#code1 li').click(function () {
        var code1 = $(this).attr("id");
        document.form.code1.value = code1;
        document.form.code2.value = code2;
        document.form.code3.value = code3;
        document.form.code4.value = code4;
        document.form.code5.value = code5;
        document.form.sort.value = sort;
        document.form.keyword.value = keyword;
        document.form.ini.value = ini;
        document.form.submit();
      });
    });
    $(function () {
      if (code2 != '') {
        var txt = $('#code2 li').filter(function () {
          return $(this).attr('id') == code2;
        }).html();
        $('#code2').prev().find('.txt02').html(txt);
      }
      $('#code2 li').click(function () {
        var code2 = $(this).attr("id");
        document.form.code1.value = code1;
        document.form.code2.value = code2;
        document.form.code3.value = code3;
        document.form.code4.value = code4;
        document.form.code5.value = code5;
        document.form.sort.value = sort;
        document.form.keyword.value = keyword;
        document.form.ini.value = ini;
        document.form.submit();
      });
    });
    $(function () {
      if (code3 != '') {
        var txt = $('#code3 li').filter(function () {
          return $(this).attr('id') == code3;
        }).html();
        $('#code3').prev().find('.txt02').html(txt);
      }
      $('#code3 li').click(function () {
        var code3 = $(this).attr("id");
        document.form.code1.value = code1;
        document.form.code2.value = code2;
        document.form.code3.value = code3;
        document.form.code4.value = code4;
        document.form.code5.value = code5;
        document.form.sort.value = sort;
        document.form.keyword.value = keyword;
        document.form.ini.value = ini;
        document.form.submit();
      });
    });
    $(function () {
      if (code4 != '') {
        var txt = $('#code4 li').filter(function () {
          return $(this).attr('id') == code4;
        }).html();
        $('#code4').prev().find('.txt02').html(txt);
      }
      $('#code4 li').click(function () {
        var code4 = $(this).attr("id");
        document.form.code1.value = code1;
        document.form.code2.value = code2;
        document.form.code3.value = code3;
        document.form.code4.value = code4;
        document.form.code5.value = code5;
        document.form.sort.value = sort;
        document.form.keyword.value = keyword;
        document.form.ini.value = ini;
        document.form.submit();
      });
    });
    $(function () {
      if (code5 != '') {
        var txt = $('#code5 li').filter(function () {
          return $(this).attr('id') == code5;
        }).html();
        $('#code5').prev().find('.txt02').html(txt);
      }
      $('#code5 li').click(function () {
        var code5 = $(this).attr("id");
        document.form.code1.value = code1;
        document.form.code2.value = code2;
        document.form.code3.value = code3;
        document.form.code4.value = code4;
        document.form.code5.value = code5;
        document.form.sort.value = sort;
        document.form.keyword.value = keyword;
        document.form.ini.value = ini;
        document.form.submit();
      });
    });
  </script>
</body>

</html>